<{extends file="layout.tpl"}>

<{block name=css}>
<style type="text/css">
	.m-area-default li:after{
		content: '';
		display: block;
		clear: both;
	}
	.m-area-default li{ line-height: 24px; margin: 10px 0; }
	.m-area-default li:last-child{ text-align: center; margin-top: 30px; }
	.m-area-default .form-control{ display: inline-block; width: 240px; margin-right: 8px; }
	.m-area-default .inputDate{ 
		display: inline-block;
		width: 80px;
		padding-left: 2px;
		margin-right: 8px;
		border-radius: 2px;
		border: 1px solid #dcdcdc;
		line-height: 24px;
		transition: border-color 515ms ease-in-out;
	}
	.m-area-default .inputDate:focus{
		outline: none;
		border-color: #2580A2;
	}
	.m-area-title{ 
		background: #2580A2; 
		color: #fff; 
		line-height: 34px;
		padding-left: 8px;
		margin-top: 20px;
	}
	.typeBox{ display: none; }
	.typeBox.apiBox{ display: block; }
	input[type="radio"], input[type="checkbox"]{ position: relative; top: 2px; left: -2px; }
</style>
<{/block}>


<{block name=content}>
<section class="m-panel-box">
	<h4>配置文件信息</h4>
	<div class="m-panel-body">
		<div>
			<form class="infoForm">
				<ul class="m-area-default">
					<li class="m-area-title">服务器信息</li>
					<li>
						<div class="col-md-4">服务器名称</div>
						<div class="col-md-8">
							<input type="text" name="server_name" class="form-control">
						</div>
					</li>
					<li>
						<div class="col-md-4">描述</div>
						<div class="col-md-8">
							<textarea class="form-control" name="server_description"></textarea>
						</div>
					</li>
					<li class="m-area-title">服务器类型</li>
					<li>
						<div class="col-md-4">DEFAULT_TTL_NS</div>
						<div class="col-md-8">
								<input type="radio" name="server_type" value="api">API(supports bind)
						</div>
					</li>
					<li>
						<div class="col-md-4">API认证秘钥</div>
						<div class="col-md-8">
							<input type="text" name="api_auth_key" class="form-control">验证密钥，使绑定配置生成脚本可以回传到NamedManager
						</div>
					</li>
					<li class="m-area-title">服务器域设置</li>
					<li>
						<div class="col-md-4">名称服务器组</div>
						<div class="col-md-8">
							<div class="serverDetail"></div>
						</div>
					</li>
					<li>
						<div class="col-md-4">主名称服务器</div>
						<div class="col-md-8">
							<input type="checkbox" name="server_primary">使此服务器成为用于DNS SOA记录的主要服务器。
						</div>
					</li>
					<li>
						<div class="col-md-4">用作NS记录*</div>
						<div class="col-md-8">
							<input type="checkbox" name="server_record">将此名称服务器作为公共NS记录添加到所有域
						</div>
					</li>
					<li><span class="btn btn-md btn-primary saveConfig">保存设置</span></li>
				</ul>
			</form>
		</div>
	</div>
</section>
<{/block}>

<{block name=js}>
<script type="text/javascript">

	function loadServerDetail() {
		var id = window.location.search.split('=')[1];
		ajaxObj('/NameServers/editShow', 'get', {id}, function(obj){
			for (var key in obj){
				var targHTML = $('[name=' + key + ']');
				if(targHTML.attr('type') == 'radio'){
					if(key == 'ZONE_DB_TYPE'){
						obj[key] == 'disabled' ? '' : targHTML.attr('checked', 'checked');
					}else{
						$('[name=' + key + '][value=' + obj[key] + ']').attr('checked', 'checked');
					}
				}else if(targHTML.attr('type') == 'checkbox'){
					obj[key] == '1' ? targHTML.attr('checked', 'checked') : '';
				}else{
					targHTML.val(obj[key]);
				}
			}
		})
	}

	function loadServerGroup(){
		ajaxObj('/NameServers/getGroupList', 'get', '', function(obj){
			var group = '';
			obj.map(function(data){
				group += `<div class="box">
										<input type="radio" 
											name="id_group" 
											value="${data.id}">
										${data.group_name}-${data.group_description}
									</div>`
			})
			$(".serverDetail").append(group);
			loadServerDetail();
		})
	}

	loadServerGroup();

	$('.saveConfig').click(function(){
		var obj = {};
		$('.infoForm input').each(function(index, data){
			var type = $(data).attr('type');
			if(type == 'radio'){
				if($(data)[0].checked){
					obj[$(data).attr('name')] = $(data).val()
				}
			}else if(type == 'checkbox'){
				obj[$(data).attr('name')] = $(data)[0].checked  ? 1 : 0;
			}else{
				obj[$(data).attr('name')] = $(data).val()
			}
		})
		var id = window.location.search.split('=')[1];
		obj.id = id;
		obj.server_description = $('[name="server_description"]').val();
		ajaxObj('/NameServers/updateData', 'post', obj, function(obj){
			layer.msg(obj.msg);
		})
	})
</script>
<{/block}>